<template>
  <div class="song-list">
    <div class="bgImage">
      <div class="content" v-if="songsItem.length">
        <img :src="songsItem[0].picUrl" alt="">
      </div>
      <div class="bar">
        <div class="left" @click="goback">
          <img src="../../../assets/img/common/back_white.svg" alt="">
        </div>
        <div class="right">
          <div class="right-left">
            <img src="../../../assets/img/common/search_white.svg" alt=""
              @click="searchClick">
          </div>
          <div class="right-right">
            <img src="../../../assets/img/common/menu_white.svg" alt="">
          </div>
        </div>
      </div>
    </div>
    <div class="bottom">
      <div class="top">
        <div class="font">
            <div class="angle">
              <div class="angles"></div>
            </div>
          <p>播放全部</p>
        </div>
      </div>
      <ul class="box">
        <li v-for="(item,index) of songsItem" :key="index"
            class="liItem" @click="choose(item.id,index)">
          <div class="box-num">
            <p>{{index + 1}}</p>
          </div>
          <div class="box-name">
            <div class="name-top">
              <p>{{item.songName}}</p>
              <p class="top-bottom">{{item.alia}}</p>
            </div>
            <div class="name-bottom">
              <p>{{item.singerName}} - {{item.zjName}}</p>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
  import {getSongSheet,getSongsUrl} from "../../../network/songsheet";
  import {mapActions} from 'vuex'

  export default {
        name: "SongList",
        data(){
            return{
              id:0,
                idx:'',
                songsItem:[],
                url:'', //歌曲链接
                picUrl:'',//图片封面
                alia:'', //歌曲后面的对应的   XXX主题曲
                zjName:'',//专辑名称
                music:{},
            }
        },
        methods:{
            ...mapActions(['AddMusic']),
          goback(){
              this.$router.back()
          },
          choose(id,index){
              console.log(this.songsItem[index].id)
              getSongsUrl(this.songsItem[index].id).then(res=>{
                  // console.log(res.data.data[0].url)
                  this.url = res.data.data[0].url
              })
              // 这里要设置延时执行否则第一次点击的时候拿不到歌曲链接
              this.$store.dispatch('AddMusic',
                  {url:this.url,
                      songItem:this.songsItem[index],
                      index:index}).then(res=>{
                  console.log(res)
              })


          //   底部显示播放控件
              this.$store.commit('showplayer')
          //    改变暂停和播放图标
              if(!this.$store.state.pause){
                  this.$store.commit('play')
              }
          },
          searchClick(){
              this.$router.push('/search')
          },
        },
        created() {
            this.idx = this.$route.params.id;
        //    获取歌单数据
            getSongSheet(this.idx).then(res=>{
                // console.log(res)
                for(var item of res.data.playlist.tracks){
                    this.picUrl = item.al.picUrl
                    this.songName = item.name
                    this.alia = item.alia[0]
                    this.id = item.id
                    this.singerName = item.ar[0].name
                    this.zjName = item.al.name
                    this.music ={
                        picUrl:this.picUrl,
                        songName:this.songName,
                        alia:this.alia,
                        id:this.id,
                        singerName:this.singerName,
                        zjName:this.zjName,
                    }
                    this.songsItem.push(this.music)
                }
            })
        }
    }
</script>

<style scoped>
  .song-list{

  }

  .bgImage{
    z-index: 9;
    position: relative;
    top: -44px;
  }

  .content{
    height: 300px;
    overflow: hidden;
  }

  .bgImage img{
    width: 100%;
  }

  .bar{
    height: 44px;
    position: fixed;
    top: 25px;
    width: 100%;
    z-index: 10;
  }

  .left{
    padding-left: 20px;
  }

  .left img{
    width: 25px;
    height: 25px;
  }

  .right{
    padding-right: 20px;
  }

  .right-left{
    display: inline;
    padding-right: 10px;
  }

  .right-left img{
    width: 25px;
    height: 25px;
  }

  .right-right{
    display: inline;
  }

  .right img{
    width: 25px;
    height: 25px;
  }

  .bottom{
    width: 100%;
    background-color: #F1EFF1;
    border-radius: 10px;
    position: absolute;
    z-index: 9;
    top: 300px;
    font-size: 15px;
    font-weight: 400;
  }

  .top{
    height: 50px;
    margin-top: -43px;
    background-color: #F1EFF1;
    border-radius: 15px 15px 0 0;
  }

  .font{
    line-height: 36px;
    margin-left: 5px;
    font-size: 14px;
  }

  .font p{
    padding-top: 6px;
  }

  .angle{
    float: left;
    width: 15px;
    height: 15px;
    border: 1px solid #000;
    border-radius: 7px;
    margin-top: 16px;
    margin-left: 15px;
    margin-right: 6px;
  }

  .angles{
    border-top: 4px solid transparent;
    border-left: 5px solid #000;
    border-bottom: 3px solid transparent;
    margin-left: 5px;
    margin-top: 3px;
  }

  .box{
    display: block;
  }

  .liItem{
    display: flex;
    margin-bottom: 22px;
  }

  .box-num{
    width: 15px;
    color: #D6D8D6;
    margin-left: 12px;
    margin-right: 12px;
    text-align: center;
    margin-top: 5px;
  }

  .name-top{
    width: 98%;
    font-size: 14px;
    font-weight: 600;
  }

  .name-top p{
    display: inline;
  }

  .top-bottom{
    margin-left: 10px;
  }

  .name-bottom{
    font-size: 12px;
    font-weight: normal;
    margin-top: 8px;
  }

  li:nth-child(-n+3) .box-num{
    color: #F7A5A6
  }

</style>